<template>
	<view class="background">
		<!-- 菜单栏 -->
		<view class="switch">
			<view class="switch-content">
				<view @click="tab=0" :class="{'switch-select':tab===0}">
					自然音
				</view>
				<view @click="tab=1" :class="{'switch-select':tab===1}">
					助眠音
				</view>
			</view>
		</view>
		<!-- 自然音 -->
		<view class="natural" @click="tab=0" :class="{'show':tab===0}">
			<!-- 自然音卡片栏 -->
			<view class="top">
				<view class="card">
					<view class="state">
						<view class="select" v-for="(item,index) in array" :key="index" v-if="index===current">
							<image :src="item.imgUrl" mode="scaleToFill" style='width: 55rpx;height: 55rpx;'></image>
						</view>
						<!-- <view class="title text-white" @click="choseTime()">
							定时关闭
						</view> -->
                        <button class="cu-btn cuIcon bg-gradual-blue" @click="choseTime()">
                        	<text>{{duration}}</text>
                        </button>
					</view>
				</view>
			</view>
           
            
			<!-- 自然音列表 -->
			<view class="box">
				<view class="icon" v-for="(item,index) in array" :key="index" style="width:187.5rpx;">
					<view class="select-default" :class="{'icon-selected' : index===current}" @click="current=index">
					
						<view v-html="item.img" style='width: 55rpx;height: 55rpx;' @click="audio(item.src)">
						</view>
						
						<view @click="audio(item.src)">
							<image :src="item.imgUrl" mode="scaleToFill" style='width: 55rpx;height: 55rpx;'></image>
							</view>
					</view>
					<view class="title">
						{{item.tit}}
					</view>
				</view>
			</view>
		</view>
		<!-- 助眠音 -->
		<view class="sleepAid" @click="tab=1" :class="{'show':tab===1}">
			<!-- 助眠音专辑栏 -->
			<view>
				<scroll-view class="scroll-view_H" scroll-x="true">
					<image v-for="(item,index) in imgArr" :key="index" :src="item.url" class="img" :class="{'img-selected': index === selected}"
					 @click="selected = index"></image>
				</scroll-view>
			</view>
			
			<!-- 助眠音详情 -->
			<view class="sleepAid-box" v-for="(item,index) in imgArr" :key="index" v-if="index===selected">
				<view class="sleepAid-box-title">
					<view class="sleepAid-box-title_name">
						{{item.title}}
					</view>
					<view class="sleepAid-box-title_anchor">
						{{item.author}}
					</view>
				</view>
				<view class="sleepAid-box-introduce">
					感受大自然生命频率，净化心灵，倾听万物讯息，回归内心深处的平静
				</view>
				<view class="sleepAid-box-data">
					<view class="sleepAid-box-data_listData">
						<view class="sleepAid-box-data_listData_list">
							{{"助眠曲列表（"+item.count+"）"}}
						</view>
						<view class="sleepAid-box-data_listData_data">

						</view>
					</view>
					
				</view>
                
                <!-- 助眠曲列表 -->
				<view v-for="(item1,index) in item.musicArr" :key="index" class="sleepAid-box-music" >
					<view class="sleepAid-box-music_name" @click="playmusic(item1,index,item)">
						<view class="sleepAid-box-music_name_L">
							{{index+1}}{{"."+item1.name}}
						</view>
						<view class="sleepAid-box-music_name_R">
						</view>
					</view>
					<view class="sleepAid-box-music_info">
						<view>
							{{item1.time}}
						</view>
						<view>
							{{item1.album}}
						</view>
						<view>
							{{item1.author}}
						</view>
                        
                        <button class="cu-btn cuIcon text-right" @click="shoucang(item1)">
                            <text class='cuIcon-favor' v-if="item1.collect!=1"></text>
                            <text class='cuIcon-favorfill' v-if="item1.collect==1"></text>
                        </button>
                        
                     <!--  <view  @click="shoucang(item1)" :class="{'sleepAid-box-data_collection-selected':item.collect===1}">
                            {{item1.collect===1?"已收藏":"收藏"}}
                        </view> -->
					</view>
                    
				</view>
			</view>
			<!-- 助眠音播放器 -->
			
			
			<!-- <view class="sleepAid-audio">
				<image src="http://p4.music.126.net/j0M6cHpMCcT8VG19Aw9rKA==/19087521858752151.jpg?param=200y200" class="sleepAid-audio-img" ></image>
        
				<view class="sleepAid-audio-title">
					<view class="sleepAid-audio-title_name">
						夏日流星
					</view>
					<view class="sleepAid-audio-title_author">
						沙皮
					</view>
				</view>
				<view class="sleepAid-audio-control">
					控制区
				</view>
			</view> -->
		</view>
		
		
		<view v-show="tab===1" class=" info">
			<view class="song-title">
				<view class="song-name">{{doPlayMusic.name}}</view>
				<view class="song-author">{{doPlayMusic.author}}</view>
			</view>
			<view class="audio-wrapper">
				<view class="audio-number">{{nowtime}}</view>
				<slider class="audio-slider"  :value="currentTime" min="0" :max="duration" @change="sliderChange" block-size="15"  />
				<view class="audio-number">{{alltime}}</view>
			</view>
			<view  class="audio-control-wrapper" >
				<view  @tap="updateWay()" v-if="playWay==2">
					<image  class="iconbtn" src="/static/image/icon/suijibofang.png"/>
				</view>
				<view  @tap="updateWay()" v-if="playWay==1">
					<image  class="iconbtn" src="/static/image/icon/xunhuanbofang.png"/>
				</view>
				<view  @tap="updateWay()" v-if="playWay==0">
						<image  class="iconbtn" src="/static/image/icon/danquxunhuan.png"/>
				</view>
				<view  @tap="last()" >
					<image class="iconbtn" src="/static/image/icon/shangyishou.png"></image>
				</view>
				<view @tap="play()" v-if="playState===1">
						<image class="iconbtn play" src="/static/image/icon/kaishi-2.png"></image>
				</view>
				<view @tap="pause()" v-else >
					<image class="iconbtn play" src="/static/image/icon/zanting-2.png"></image>
				</view>
				<view  @tap="next()" >
					<image class="iconbtn" src="/static/image/icon/xiayishou.png"></image>
				</view>
				<view><image class="iconbtn" src="/static/image/icon/yinleliebiao.png"></image></view>
			</view>
		
		</view>
			
	</view>
</template>

<script>
	import sleepAid from './sleepAid.js'
    
	export default sleepAid;
	
	
</script>

<style>
	@import url("./sleepAid.css");
	.song-title{
		margin: 30upx;
	}
	.song-name{
		text-align: center;
		color: #FFFFFF;
		font-size: 35upx;
		margin-top: 30upx;
	
	}
	.song-author{
		text-align: center;
		color: #FFFFFF;
		font-size: 25upx;
	}
	.info{
		/* position: relative; */
		/* position: fixed;
		z-index: 999;
		bottom: 1rpx;
		height: 120rpx;
		display: flex;
		flex-direction: row; */
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 1024;
		background-color: #0081ff;
		/* margin: 30upx; */
		border-radius:5px
	}
	.iconbtn{
		width: 60upx;
		height: 60upx;	
		margin-left: 30upx;
		margin-right: 30upx;
	
	}
	.imt-audio {
		padding: 30upx;
		background: #fff;
		border-radius: 20upx;
	}
	
	.audio-wrapper {
		display: flex;
		align-items: center;
		margin: 30upx;
	}
	
	.audio-number {
		font-size: 24upx;
		line-height: 1;
		color: #FFFFFF;
	}
	
	.audio-slider {
		flex: 1;
		margin: 0 30upx;
	}
	
	.audio-control-wrapper {
		margin-top: 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: "iconfont" !important;
	
	}
	
	
	
</style>
